<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script src="../js/jquery-2.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/admin/role-manager.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>

		<style>
			body{
				padding: 20px;
				background-color: white;

			}

		</style>
	</head>
	<body>

		<!--修改的模态框开始-->
		<!-- Modal -->
		<div class="modal fade" id="updateRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">角色修改</h4>
		      </div>
		      <div class="modal-body">

					<!-- 角色新增的表单 开始 -->
					<form class="form-horizontal">
					  <div class="form-group">
					    <label for="updateTeacherId" class="col-sm-2 control-label">#</label>
					    <div class="col-sm-10">
						  <p class="form-control-static" name="updateRoleId"></p>
						  <input type="hidden" name="updateRoleId" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="roleName" class="col-sm-2 control-label">角色名称</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="roleName" name="updateRoleName" placeholder="角色名称">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="roleCode" class="col-sm-2 control-label">角色编码</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="roleCode" name="updateRoleCode" placeholder="角色编码">
					    </div>
					  </div>
					</form>
					<!-- 角色新增的表单 结束 -->

		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="modalUpdateRoleButton" class="btn btn-primary">修改</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!--修改的模态框结束-->

		<!-- 新增的模块框开始 -->
		<!-- Modal -->
		<div class="modal fade" id="addRoleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">角色新增</h4>
		      </div>
		      <div class="modal-body">

					<!-- 角色新增的表单 开始 -->
					<form class="form-horizontal">
					  <div class="form-group">
					    <label for="roleName" class="col-sm-2 control-label">角色名称</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="roleName" name="addRoleName" placeholder="角色名称">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="roleCode" class="col-sm-2 control-label">角色编码</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="roleCode" name="addRoleCode" placeholder="角色编码">
					    </div>
					  </div>
					</form>
					<!-- 角色新增的表单 结束 -->

		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" id="saveRoleButton" class="btn btn-primary">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 新增的模态框结束 -->


		<div class="container">

			<!-- 路径导航开始-->
			<div class="row">
				<div class="col-md-12">
					<ol class="breadcrumb">
					  <li><a style="text-decoration: none;" href="#">角色模块</a></li>
					  <li><a style="text-decoration: none;" href="#">角色管理</a></li>
					</ol>
				</div>
			</div>
			<!-- 路径导航结束-->

			<!-- 按钮开始-->
			<div class="row">
				<div class="col-md-4">
					<button id="addRoleButton" class="btn btn-primary">增加</button>
					<button id="deleteRoleButton" class="btn btn-danger">删除</button>
				</div>
			</div>
			<!-- 按钮结束-->

			<!-- 表格开始-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="roleListTable">
						<tr>
							<th><input id="selectAllRole" type="checkbox"></th>
							<!-- <th>#</th> -->
							<th>角色名称</th>
							<th>角色编码</th>
							<th>操作</th>
						</tr>
						<tr v-for="role,index in roles">
							<td><input class="check-role" type="checkbox" v-bind:value="role.id"></td>
							<!-- <td>{{role.id}}</td> -->
							<td>{{role.roleName}}</td>
							<td>{{role.roleCode}}</td>
							<td>
								<button @click="tableUpdateRoleButton(index)" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
								</button>
								<!-- <button class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
								</button> -->
							</td>
						</tr>
						
						<!--分页组件开始-->
						<tr style="background-color: white;">
							<td colspan="2">
								<span class="glyphicon glyphicon-flag"></span>
								第
								<span class="pageNumber">{{pageNumber}}</span>
								页 
								&nbsp;
								<span class="glyphicon glyphicon-align-justify"></span>
								每页
								<span class="totalPage">{{pageSize}}</span>
								条
								&nbsp; 
								<span class="glyphicon glyphicon-check"></span>
								总记录
								<span class="totalCounter">{{totalCounter}}</span>
								条
								&nbsp;
								<span class="glyphicon glyphicon-briefcase"></span>
								共
								<span class="totalPage">{{totalPage}}</span>
								页
							</td>
							<td colspan="4">
								<!-- 分页按钮开始 -->
								<nav aria-label="Page navigation">
								  <ul class="pagination">
									
									<!-- 第1页 -->
									<li id="firstPage"><a href="#">&lt;&lt;</a></li>  
									
									<!-- 上1页 -->
								    <li id="prePage"><a href="#">&lt;</a></li>
									
									<!-- 下1页 -->
								    <li id="nextPage"><a href="#">&gt;</a></li>
									
									<!-- 最后1页 -->
									<li id="lastPage"><a href="#">&gt;&gt;</a></li> 
								  </ul>
								</nav>
								<!-- 分页按钮开始 -->
							</td>
						</tr>
						<!--分页组件结束-->
						
					</table>
				</div>
			</div>
			<!-- 表格结束-->
		</div>
	</body>
</html>
